<template lang="pug">
    Modal(
        v-model="addCategoriesDialogClose"
        title="添加分类"
    )
        Form(ref="addCategoriesRef" :model="addCategoriesForm" :rules="addCategoriesFormRuleValidate" :label-width="120")
            FormItem(label="分类名称" prop="name")
                Input(v-model="addCategoriesForm.name" )
            FormItem(label="关键词" prop="key")
                Input(v-model="addCategoriesForm.key")
            FormItem(label="父级分类" prop="parent_id")
                Input(v-model="addCategoriesForm.parent_id")

        div(slot="footer")
            Button(size="small" @click="addCategoriesDialogClose = false") 取消
            Button(type="primary" size="small" @click="HandleAddCategories") 确定
</template>

<script>
    import {addCategories} from '@/service/category'
    export default {
        data() {
            return {
                addCategoriesForm: {
                    name: '',
                    key: '',
                    parent_id: ''
                },
                addCategoriesFormRuleValidate: {
                    name: [
                        {required: true, message: '分类名称不能为空', trigger: 'blur'}
                    ],
                    key: [
                        {required: true, message: '关键词不能为空', trigger: 'blur'}
                    ],
                    parent_id: [
                        {required: true, message: '父级分类不能为空', trigger: 'blur'}
                    ]
                },
            }
        },
        props: [
            'addCategoriesDialog'
        ],
        computed:{
            addCategoriesDialogClose: {
                get() {
                    return this.addCategoriesDialog
                },
                set(val) {
                    this.$emit('upDateAddCategoriesDialog',val)
                }
            }
        },
        methods:{
            async HandleAddCategories() {
                this.$refs['addCategoriesRef'].validate(async (valid) => {
                    if (valid) {
                        try {
                            const res = await addCategories(this.addCategoriesForm)
                            if (res.data.msg) {
                                this.addCategoriesDialogClose = false
                                this.$refs['addCategoriesRef'].resetFields();
                                return this.$Message.success('添加成功!')
                            }
                            this.$Message.error(res.data.err_msg);
                        } catch (e) {
                            console.log(e)
                        }
                    } else {
                        this.$Message.error('请完善表单信息!');
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>